<script setup lang="ts">
import {defineOptions, ref} from 'vue';
import AppXj from "@/views/home/modules/app-xj.vue";

defineOptions({
  name: 'Application'
});
const appxj = ref();

const toggleModal = (name: string) => {
  if (name === '询价') {
    appxj.value.toggleModal();
  }
}
</script>

<template>
  <NCard :bordered="false" size="small" class="card-wrapper h-full">
    <div class="h-full" style="height: 300px">
      <n-grid x-gap="12" :cols="8">
        <n-gi>
          <div class="app-container">
            <icon-local-ask-leave class="app-icon"/>
            <div class="app-label">请假</div>
          </div>
        </n-gi>
        <n-gi>
          <div class="app-container" @click="toggleModal('询价')">
            <icon-local-xunjia class="app-icon" style="border-radius: 12px"/>
            <div class="app-label">询价</div>
          </div>
          <AppXj ref="appxj"/>
        </n-gi>
        <n-gi>
          <div class="app-container">
            <icon-local-baojia class="app-icon"/>
            <div class="app-label">报价</div>
          </div>
        </n-gi>
        <n-gi>
          <div class="app-container">
            <icon-local-xzxm class="app-icon" style="border-radius: 12px"/>
            <div class="app-label">新增项目</div>
          </div>
        </n-gi>
      </n-grid>
    </div>
  </NCard>
</template>

<style scoped>
.app-container {
  height: 3.5rem;
  width: 3.5rem;
  background-color: #ffffff;
  border-radius: 12px;
  text-align: center;
}

.app-icon {
  font-size: 3.5rem;
}

.app-container:hover {
  box-shadow: 0 2px 4px rgba(120, 104, 104, 0.42), 0 0 6px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  //font-weight: 400;
}

:deep(.n-card__content) {
  padding: 13px !important;
}
</style>
